<script setup lang="ts">
import { onMounted, ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { useTradingAccountStore } from '@/stores/stock'
import { ListPlan } from '@/api/note'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()
const store = useTradingAccountStore()

const dialog = reactive({
  plan: false,
})

const route = useRoute()
const stockId = route.query.stockId

// 页面初始化
onMounted(() => {
  if (store.tradingAccountList.length > 0) {
    init()
  }
})

watch(
  () => store.currentTradingAccount,
  () => {
    init()
  },
)

const init = function () {
  reqPlan(1)
}

// Plan
const planPageData = ref({
  total: 0,
  pageSize: 10,
  list: [],
})

const reqPlan = function (num) {
  let key = route.params.stockId

  ListPlan(store.currentTradingAccount.id, stockId, key, num, 10).then((resp) => {
    if (resp.code === 0) {
      planPageData.value = resp.data
    }
  })
}
</script>

<template>
  <div>
    <el-page-header
      style="margin-bottom: 23px"
      :icon="ArrowLeft"
      title="返回"
      @back="router.push('/note/stock/list')"
    >
      <template #content>
        <el-text>Plan</el-text>
      </template>
    </el-page-header>

    <!--  表格展示     -->
    <div class="stock">
      <el-table :data="planPageData.list" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="title" label="Title" width="180" />
        <el-table-column prop="status" label="Status" width="180">
          <template #default="scope">
            <el-tag size="small" type="success" v-if="scope.row.status == 0">进行中</el-tag>
            <el-tag size="small" type="danger" v-else>已完结</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="Created At" width="240" />
        <el-table-column fixed="right" label="Operations" min-width="120">
          <!-- 操作需要再想想 -->
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="
                router.push('/note/stock/operate?stockId=' + stockId + '&planId=' + scope.row.id)
              "
            >
              Detail</el-button
            >
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @update:current-page="reqPlan"
        :page-size="planPageData.pageSize"
        layout="prev, pager, next"
        :total="planPageData.total"
        size="large"
      />
    </div>
  </div>
</template>

<style scoped></style>
